<template>
  <div id="main">
    <!-- 左部分 -->
    <div class="main_left">
      <!-- 轮播图部分 -->
      <div class="swiper_box">
        <el-carousel trigger="click">
          <el-carousel-item v-for="item in 4"
                            :key="item">
            <img src="https://w.wallhaven.cc/full/2y/wallhaven-2yddxy.jpg"
                 style="width: 100%;height:100%;" />
          </el-carousel-item>
        </el-carousel>
      </div>
      <!-- 推荐论坛部分 -->
      <div class="hot_forum">
        <!-- 标题 -->
        <div style="padding:10px 0;"> <span style="font-weight:bolder;font-size:20px;color:#f04494;">|</span> <span style="font-size:15px;color:#4e5358;font-weight:bolder;">推荐论坛</span></div>
        <!-- 论坛部分 -->
        <div class="forum_box">
          <!-- 论坛item -->
          <div class="forum_item"
               v-for="(item,index) in topTalks"
               :key="item.id"
               @click="$router.push({
                path:'TalkDetail',
                query:{id:item.id}
               })">
            <!-- hot部分 -->
            <div class="hot">
              <img src="@/assets/talk/hot.png"
                   style="color:rgb(255 255 255 / 45%);" />
            </div>

            <!-- 论坛简介部分 -->
            <div class="summary_box">
              <!-- 论坛头像 -->
              <div class="image_box">
                <img :src="item.indexImage" />
              </div>
              <!-- 论坛名称&简介部分 -->
              <div class="info_box">
                <div style="font-weight:bolder;"
                     class="talkName">{{item.talkName}}</div>
                <div style="color:gray;">{{item.summary}}</div>
                <div>
                </div>
              </div>
            </div>

          </div>
        </div>

      </div>
      <!-- 最新发布部分 -->
      <div class="latest_box">
        <div style="padding:10px 0;"> <span style="font-weight:bolder;font-size:20px;color:#f04494;">|</span> <span style="font-size:15px;color:#4e5358;font-weight:bolder;">最新发布</span></div>
        <div class="article_box">
          <div class="article_item"
               v-for="(item,index) in latest"
               :key="item.id">
            <!-- 图片部分 -->
            <div class="img_box "
                 :style="`background-image: url(${item.image});`">
              <div class="mask"></div>
            </div>
            <!-- 简介部分 -->
            <div class="summary_box">
              <!-- 标题 -->
              <h3>{{item.title}}</h3>
              <div>{{item.summary}}</div>

              <!-- 发布者信息 -->
              <div class="publisher_box">
                <div class="avatar_box">
                  <img :src="item.avatar"
                       style="width: 100%;" />
                </div>
                <div style="margin-left:10px;color:gray;">{{item.nickname}}</div>
                <div style="margin-left: 10px; color:gray;">{{item.createTime.substring(0,10)}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 右部分 -->
    <div class="main_right">
      <!-- 用户信息部分 -->
      <div class="user_box">
        <!-- 背景图片部分 -->
        <div class="bg_box">
          <img src="@/assets/talk/user_t.jpg"
               style="width: 100%;height:100%;" />
        </div>
        <!-- 用户头像部分 -->
        <div class="avatar_box">
          <img src="@/assets/talk/avatar-default.png"
               alt=""
               v-if="user_info.avatar===null">
          <img :src="user_info.avatar"
               v-if="user_info.avatar!=null" />
        </div>
        <!-- 用户信息 -->
        <div style="margin:50px 0 20px 0;text-align:center;font-weight:bolder;">
          <div>{{user_info.nickname}}</div>
          <div style="color:gray;font-size:10px;">{{user_info.email}}</div>
        </div>
        <!-- 按钮部分 -->
        <div style="display:flex;width: 60%;margin:0 auto;
        justify-content: space-around;
        ">
          <div style="flex:1;text-align:center;">
            <el-button type="primary">我的论坛</el-button>
          </div>
          <div style="flex:1;text-align:center;">
            <!-- 点击跳转到用户信息页面 -->
            <el-button type="warning"
                       @click="PageJump('userInfo')">用户中心</el-button>
          </div>
        </div>
      </div>
      <!-- 推荐帖子部分 -->
      <div class="recommend_box">
        <div style="padding:10px 0;position: absolute;top:-40px;">
          <span style="font-weight:bolder;font-size:20px;color:#f04494;">|</span>
          <span style="font-size:15px;color:#4e5358;font-weight:bolder;">推荐帖子</span>
        </div>

        <div class="recommend">
          <div class=""
               v-for="(item,index) in recommend"
               :key="item.id">
            <!-- 样式重写 => CareeBy -->
            <!-- top1 论坛布局 -->
            <div v-if="index==0"
                 class="recommend-item-top1 image-style-cover image-style-cover-1 recommend-item"
                 :style="`background-image: url(${item.image.split(',')[0]});`">
              <!-- 黑窗蒙版 -->
              <div class="mask">
                <!-- 论坛内容 -->
                <div class="recomend-item-content">
                  <!-- 左部头像 -->
                  <div class="content-avatar">
                    <img :src="item.avatar">
                  </div>
                  <!-- 右边内容 -->
                  <div class="content-text">
                    <!-- 标题 -->
                    <div style="display: flex; flex-flow: row;align-items: flex-end;">
                      <span class="title">{{ item.title }}</span>
                      <span class="datetime">{{ item.createTime }}</span>
                    </div>
                    <span class="summary">{{ item.summary }}</span>
                  </div>
                </div>
              </div>
            </div>
            <!-- 其他样式 -->
            <div v-if="index!=0"
                 class=" recommend-item-topS recommend-item ">
              <div class="image-style-cover image-style-cover-2  item-topS-img  "
                   :style="`background-image: url(${item.image.split(',')[0]});`">
                <!-- 黑窗蒙版 -->
                <div class="mask"></div>
              </div>
              <div class="item-topS-content">
                <span class="titleS">{{ item.title }}</span>
                <div style="display:flex; flex-flow: row;justify-content:space-between;">
                  <div>
                    <i class="el-icon-time"></i>
                    <span class="datetime">{{ item.createTime}}</span>
                  </div>
                  <div>
                    <i class="el-icon-user"></i>
                    <span class="nickname">{{ item.nickname }}</span>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getTopPosts, getLatest,
  getRecommend
} from "@/api/talk"
import tile from '@/components/tile.vue';
export default {
  components: { tile },
  name: 'SchoolForumIndex',

  data () {
    return {
      topTalks: [],
      user_info: {},
      latest: [],
      recommend: []
    };
  },

  mounted () {
    this.getData()
  },

  methods: {
    // 页面跳转函数
    PageJump (falg) {
      switch (falg) {
        case "userInfo":
          this.$router.push("UserIndexPage")
          break;
      }
    },
    getData () {
      if ((localStorage.getItem("user") + "") === "{}") {
        this.user_info = {
          nickname: 'Hi! 请登录',
          avatar: null
        }
      } else {
        this.user_info = JSON.parse(localStorage.getItem("user"))
      }
      getTopPosts().then(resp => {
        this.topTalks = resp.list
        // console.log(this.topTalks)
      })

      getLatest().then(resp => {
        this.latest = resp.list
        this.latest.map(item => {
          item.image = item.images.split(",")[0]
        })

      })

      getRecommend().then(resp => {
        this.recommend = resp
        console.log(this.recommend); // 查看推荐论坛数据
        this.recommend.map(item => {
          item.image = item.images.split(",")[0]
        })

      })
    }
  },
};
</script>

<style lang="scss" scoped>
#main {
  width: 100%;
  height: 100%;
  overflow: auto;
  // margin: 20px 0 0 0;
  display: flex;
  //左部分
  .main_left {
    flex: 3;
    box-sizing: border-box;
    margin-right: 30px;
    // border: 1px solid black;
    // 轮播图
    .swiper_box {
      border: 1px solid black;
    }
    // 推荐论坛部分
    .hot_forum {
      margin: 5px 0 20px 0;
      // border: 1px solid orange;
      // 论坛部分
      .forum_box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        // justify-content: flex-start;
        .forum_item {
          position: relative;
          flex: 1;
          margin: 0 5px 5px 5px;
          width: calc((100% - 40px) / 3);
          min-width: calc((100% - 40px) / 3);
          max-width: calc((100% - 40px) / 3);
          height: 120px;
          border: 1px solid #e5e5e5;
          background-color: rgb(255 255 255 / 45%);
          border-radius: 5px;
          cursor: pointer;
          // hot部分
          .hot {
            position: absolute;
            top: 0;
            padding: 0.3em 0.2em 0.2em 0.2em;
            border-radius: 0 0 50px 50px;
            line-height: 1.4;
            right: 1em;
            width: 20px;
            height: 20px;
            // background-color: red;
            text-align: centers;
            // background-color: linear-gradient(135deg, #fd7a64 10% #fb2d2d 100%);
          }
          // 论坛简介部分
          .summary_box {
            display: flex;
            align-items: center;
            box-sizing: border-box;
            margin: 8px 10px;
            // 头像部分
            .image_box {
              flex: 1;
              // border: 1px solid red;
              box-sizing: border-box;
              margin-top: 10px;
              text-align: center;
              // overflow: hidden;
              img {
                width: 50%;
                border-radius: 50%;
                overflow: hidden;
                border: 1px solid #e1e1e1;
              }
            }
            // 论坛信息
            .info_box {
              flex: 2.5;
              // border: 1px solid black;
              box-sizing: border-box;
              line-height: 25px;
              .talkName:hover {
                color: #f04494;
              }
            }
          }
        }
      }
    }
    // 最新帖子发布部分
    .latest_box {
      // border: 1px solid red;
      // 帖子
      .article_box {
        // overflow: hidden;
        .article_item {
          display: flex;
          // align-items: center;
          margin: 15px 0;
          background-color: rgb(255 255 255 / 45%);
          border-radius: 15px;
          box-sizing: border-box;
          padding: 30px 15px;

          // 图片部分
          .img_box {
            // border: 1px solid blue;
            // flex: 1;
            border-radius: 15px;
            overflow: hidden;
            object-fit: cover;
            width: 200px;
            height: 133px;
            background-size: 150%;
            background-position: center;
            background-repeat: no-repeat;
            transition: all 0.5s;
            margin-right: 30px;
            cursor: pointer;
            img {
              // width: 100%;
              max-width: 100%;
              max-height: 100%;
              // border: 1px solid #e1e1e1;
              // border-radius: 15px;
            }
          }
          // 简介部分
          .summary_box {
            position: relative;
            flex: 3;
            // border: 1px solid red;
            line-height: 30px;
            h3 {
              cursor: pointer;
            }
            h3:hover {
              color: #f04494;
            }
            // 发布者信息
            .publisher_box {
              display: flex;
              align-items: center;
              position: absolute;
              bottom: 0;
              // 头像
              .avatar_box {
                width: 30px;
                height: 30px;
                border: 1px solid #e1e1e1;
                border-radius: 50%;
                overflow: hidden;
              }
            }
          }
        }
      }
    }
  }
  // 右部分
  .main_right {
    flex: 1;
    // border: 1px solid blue;
    // 用户信息部分
    .user_box {
      border: 1px solid red;
      height: 300px;
      border-radius: 20px;
      margin-bottom: 40px;
      // border-top-right-radius: 20px;
      overflow: hidden;
      background-color: rgb(255 255 255 / 45%);
      position: relative;
      // 背景图片部分
      .bg_box {
        height: 140px;
      }
      // 用户头像部分
      .avatar_box {
        position: absolute;
        left: 37.5%;
        top: 35%;
        width: 80px;
        height: 80px;
        // margin-bottom: 35%;
        border: 1px solid #e1e1e1;
        text-align: center;
        border-radius: 50%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.recommend {
  // border: 1px solid red;
  background-color: rgb(255 255 255 / 45%);
  width: 94%;
  border-radius: 10px;
  overflow: hidden;
  padding: 10px;

  .recommend-item-top1 {
    width: 100%;
    height: 150px;
    // border: 1px solid red;
  }
  .recommend-item-topS {
    display: flex;
    flex-flow: row;
    width: 100%;
    height: 100%;
    // border: 1px solid red;
    .item-topS-content {
      margin-left: 10px;
      display: flex;
      justify-content: space-between;
      flex-flow: column;
      .titleS {
        padding: 3px;
        font-size: 13px;
        font-weight: bold;
        color: rgb(69, 69, 69);
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .datetime {
        font-size: 12px;
      }
      .nickname {
        font-size: 12px;
      }
    }
    .item-topS-content {
      flex: 2;
    }
  }

  .recommend-item {
    overflow: hidden;
    border-radius: 10px;
    transition: all 0.5s;
    margin-bottom: 7px;
  }

  .item-topS-img {
    background-size: 150%;
    border-radius: 10px;
    flex: 1;
    height: 70px;
    width: 93px;
  }
  // 浮动图片放大
  .recomend-item-content {
    width: 94%;
    height: 50px;
    // border: 1px solid black;
    padding: 10px;
    display: flex;
    flex-flow: row;
    .content-avatar {
      width: 40px;
      height: 40px;
      img {
        width: 100%;
        height: 100%;
        border: 2px solid white;
        border-radius: 100%;
        overflow: hidden;
      }
    }
    .content-text {
      margin-left: 20px;
      color: white;
      font-weight: bold;
      font-size: 15px;
      white-space: nowrap;
      .title {
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
      }
      .title:hover {
        color: #f04494;
      }
      .summary {
        display: block;
        width: 240px;
        font-size: 13px;
        margin-top: 5px;
        font-weight: normal;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .datetime {
        color: rgb(204, 204, 204);
        font-size: 10px;
        margin-left: 10px;
      }
    }
  }
}
.image-style-cover {
  overflow: hidden;
  background-position: center;
  // background-size: contain;
  background-size: 100%;
  background-repeat: no-repeat;
  transition: 0.5s;
}
.mask {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  background: -webkit-linear-gradient(
    bottom,
    rgb(0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 44%,
    rgba(51, 51, 51, 0) 99%
  );
}
.image-style-cover-1:hover {
  background-size: 104%;
}
.recommend-item-topS:hover .image-style-cover-2 {
  background-size: 165% !important;
}
.recommend-item-topS {
  .item-topS-content {
    .titleS {
      cursor: pointer;
    }
    .titleS:hover {
      color: #f04494;
    }
  }
}
.recommend-item-topS:hover .titleS {
  color: black;
}
.article_item:hover .img_box {
  background-size: 160% !important;
}
// 媒体查询 页面监控 width-size > 1150px
@media screen and (max-width: 1200px) {
  .main_right {
    display: none;
  }
}
</style>
